{% extends 'base.html' %}
{% block head %}
    <script type="text/javascript">
        //计算小计和总计
        function total(){
            //勾选商品的总价
            var total1 = 0;
            //全部商品个数
            var total_count = 0;
            //勾选商品个数
            var total_select = 0;
            $('.col07').each(function(){
                //获取数量
                var count = $(this).prev().find('input').val();
                //获取单价
                var price = $(this).prev().prev().text();
                //计算小计
                var total0 = parseFloat(count)*parseFloat(price);
                $(this).html(total0.toFixed(2));
                //如果勾选了这个商品，就计入总价和共计商品个数
                if($(this).parent().find("input").first().prop('checked')){
                    total1 += total0;
                    total_select++;
                }
                total_count++;
            });
            //全部商品个数
            $('.total_count em').html(total_count);
            //显示勾选商品的总价
            $('.settlements').find('em').html(total1.toFixed(2));
            //勾选商品个数
            $('.settlements').find('b').html(total_select);
        }

        //删除
        function cart_del(cart_id){
            del = confirm('确定要删除吗？');
            if(del){
                $.get('/cart/delete'+cart_id+'/', function(data){
                    if(data.ok == 0){
                        $('ul').remove('#'+cart_id);
                        total();
                    }
                });
            }
        }

        $(function(){
            total();
{#            //结算构造url#}
{#            $('.settlements li a').click(function (){#}
{#                var href = '/order/?';#}
{#                $(':checkbox:not(#check_all):checked').each(function(){#}
{#                    cart_id = $(this).attr('id');#}
{#                    href += 'cart_id=' + cart_id + '&';#}
{#                });#}
{#                $('.settlements li a').attr("href", href);#}
{#            });#}
            //数量加
            $('.add').click(function(){
                txt = $(this).next();
                //模拟手动触发失去焦点事件
                txt.val(parseFloat(txt.val())+1).blur();
            });
            //数量减
            $('.minus').click(function(){
                txt = $(this).prev();
                //模拟手动触发失去焦点事件
                txt.val(parseFloat(txt.val())-1).blur();
            });
            //手动修改数量
            $('.num_show').blur(function(){
                count = $(this).val();
                if (count<1){
                    alert('请输入正确的数量');
                    $(this).val(1);
                    //这个事件特别强大，会让跟这个相关的对象刷新这个值
                    $(this).focus();
                    return;
                }
                cart_id = $(this).parents('.cart_list_td').attr('id');
                $.get('/cart/edit' + cart_id + '_' + count + '/', function(data){
                    if(data.ok==0){//修改成功
                        total();
                    }else{//修改失败，显示原来的数量
                        $(this).val('1');
                    }
                });
            });
            //全选全消
            $('#check_all').click(function(){
                state = $(this).prop('checked');
                $(':checkbox:not(#check_all)').prop('checked', state);
                total();
            });
            //勾选商品
            $(':checkbox:not(#check_all)').click(function(){
                if($(this).prop('checked')){
                    if($(':checked').length+1==$(':checkbox').length){
                        $('#check_all').prop('checked', true);
                    }
                }else{
                    $('#check_all').prop('checked', false);
                }
                total();
            });
        });
    </script>
{% endblock head %}
{% block content %}
<div class="total_count">全部商品<em>8</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">库存</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form action="/order/" method="get" style="margin-bottom: 30px">
    {% for cart in carts %}
	<ul class="cart_list_td clearfix" id="{{ cart.id }}">
		<li class="col01"><input type="checkbox" name="cart_id" id="{{ cart.id }}" value="{{ cart.id }}" checked></li>
		<li class="col02"><img src="/static/{{ cart.goods.gpic }}"></li>
		<li class="col03">{{ cart.goods.gtitle }}<br><em>{{ cart.goods.gprice }}元/500g</em></li>
		<li class="col04">{{ cart.goods.gstock }}</li>
		<li class="col05">{{ cart.goods.gprice }}</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" class="num_show fl" value="{{ cart.count }}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">23.50元</li>
		<li class="col08"><a href="javascript:cart_del({{ cart.id }});">删除</a></li>
	</ul>
    {% endfor %}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" id="check_all" checked="checked"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>42.60</em><br>共计<b>8</b>件商品</li>
		<li class="col04"><input type="submit" class="order" value="去结算"></li>
	</ul>
    </form>
{% endblock content %}